<template>
  <div class="container">
    <div class="diaphaneity">
      <div class="iconfont icon-xiangxia JianTou" @click="go_play"></div>
      <div class="Header">
        <div class="GeMing">{{ ar_name }}</div>
        <div class="GeShou">{{ m_name }}</div>
      </div>
      <div class="banner">
        <img :class="{ZhiZhen:isZhiZhen}" class="pic3" src="@/assets/images/aqn.png" alt />
        <div class="yuan">
          <img :class="{line:isLine}" class="pic1" src="@/assets/images/black.png" alt />
          <img :class="{line:isLine}" class="pic2" src="@/assets/images/123.jpg" alt />
        </div>
      </div>
      <!-- v-show="url" -->
      <div class="myicon">
        <!-- 随机播放 -->
        <div class="iconfont icon-suijibofang qwe"></div>
        <!-- 上一首 -->
        <div class="iconfont icon-zuobofang qwe" @click="previous"></div>
        <!-- 播放/暂停 -->
        <div class="iconfont icon-bofang qwe" @click="boFang"></div>
        <!-- 下一首 -->
        <div class="iconfont icon-youbofang qwe" @click="next"></div>
        <div class="iconfont icon-shoucang qwe" :class="{love:isLove}" @click="love"></div>
      </div>
      <audio ref="audio" autoplay :src="url"></audio>
      <!-- <audio :src=''></audio> -->
      <div v-show="!url" class="copyright">暂无版权</div>
    </div>
    <!-- 底部播放小窗口 -->
    <!-- <div class="music_window" @click="go_play">
      <div class="imgWrap">
        <img src="../assets/images/logo.jpg" alt="">
      </div>
      <div class="music_window_main">
        <div class="left">
          <p class="al_name">{{ m_name }}</p>
          <p class="ar_name">{{ ar_name }}</p>
        </div>
        <div class="right">
          <span class="iconfont icon-zuobofang" @click.stop="previous"></span>
          <span class="iconfont icon-bofang" @click.stop="boFang"></span>
          <span class="iconfont icon-youbofang" @click.stop="next"></span>
          <span class="iconfont icon-suijibofang"></span>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { toPlaySong } from '../api/rank_list'
export default {
  name: "item",
  data() {
    return {
      isLine: true,
      isZhiZhen: true,
      isLove: false,
      flag: true,
      music_all: null,
      music_id: "405998841",
      url: null,
      id: null, // 控制第几首
      index: null, // 第几首进来的
      playing: true,
      m_name: null, // 歌曲名
      ar_name: null // 歌手名
    };
  },
  async created() {
    // 接收音乐播放的歌曲数组
    // 'https://netease.bluej.cn/song/url?id=405998841'
    // 接收到音乐数组，传入id，拿播放地址
    console.log("56歌手", this.$route.params.id_list);
    this.music_all = this.$route.params.id_list;
    this.index = this.$route.params.index;
    this.id = this.music_all[`${this.index}`].id;
    console.log("this.id为:", this.id, "index:", this.index);
    let res = await toPlaySong(this.music_all[`${this.index}`].id);
    // 歌名
    this.m_name = this.music_all[this.index].name;
    // 歌手名（artists/ar）
    // this.ar_name = this.music_all[this.index].artists[0].name;
    // console.log(this.m_name, this.ar_name);
    // 播放地址
    this.url = res.data.data[0].url;
    console.log(res, this.url);
    if (this.url != null) {
      this.isZhiZhen = false;
      this.isLine = false;
    }
  },
  methods: {
    boFang() {
      // 如果 flag 为true就运行
      if (this.flag) {
        this.flag = false;
        this.isZhiZhen = !this.isZhiZhen;
        this.isLine = !this.isLine;
        // 1秒后把开关打开
        let timer = setTimeout(() => {
          this.flag = true;
        }, 1000);
        console.log(timer);
      }
      // 暂停播放
      if (this.playing) {
        this.playing = false;
        this.$refs.audio.pause();
        // console.log(this.$refs);
      } else {
        this.playing = true;
        this.$refs.audio.play();
      }
    },
    // 播放下一首
    async next() {
      // 判断是最后一首跳到第一首
      this.index == this.music_all.length - 1 ? (this.index = 0) : this.index++;
      console.log(this.index);
      let res = await this.$axios(
        `https://netease.bluej.cn/song/url?id=${
          this.music_all[`${this.index}`].id
        }`
      );
      console.log(res);
      this.url = res.data.data[0].url;
      this.m_name = this.music_all[this.index].name;
      // this.ar_name = this.music_all[this.index].artists[0].name;
      // 版权判断
      if (this.url == null) {
        this.$refs.audio.pause();
        setTimeout(() => {
          this.next();
        }, 1000);
      }
    },
    // 播放上一首
    async previous() {
      // 判断是第一首跳到最后一首
      this.index == 0 ? (this.index = this.music_all.length - 1) : this.index--;
      console.log(this.index);
      let res = await this.$axios(
        `https://netease.bluej.cn/song/url?id=${
          this.music_all[`${this.index}`].id
        }`
      );
      console.log(res);
      this.url = res.data.data[0].url;
      this.m_name = this.music_all[this.index].name;
      // this.ar_name = this.music_all[this.index].artists[0].name;
      // 版权判断
      if (this.url == null) {
        this.$refs.audio.pause();
        setTimeout(() => {
          this.previous();
        }, 1000);
      }
    },
    // 收藏红心
    love() {
      this.isLove = !this.isLove;
    },
    // 返回搜索页，不使用路由跳转，将显示隐藏
    go_play() {
      this.$router.go(-1)
    }
  }
};
</script>

<style scoped>
@import "../assets/css/item.css";
.line {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.copyright {
  position: fixed;
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
}
</style>